<template>
  <div class="page" :style="{height:pageHeight+'px'}">
    <login @changeState="changeState" v-if="state==1"/>
    <chatRoom v-if="state==2" class="chatroom"/>
  </div>
</template>

<script>
import login from './login'
import chatRoom from './chat'

export default {
  name: 'page',
  components: {
    login,
    chatRoom
  },
  data(){
    return {
      state:1,
      pageHeight:0
    }
  },
  mounted(){
    this.pageHeight = document.documentElement.clientHeight||document.body.clientHeight
  },
  methods:{
    changeState(val){
      this.state = val
    }
  }
  // props: {
  //   msg: String
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page{
  width:100%;
  background: url('../assets/chat_bg.png');
  background-size:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .chatroom{
    width:67%;
    height:85%;
    min-height: 600px;
    min-width: 970px;
    background:white;
    border-radius: 4px;
    display: flex;
  }
}
</style>
